@import url('./constant');

.el-container {
    height: 100%;
    overflow: hidden !important;
    /* header */

    /deep/ .el-header {
        height: @headerHight !important;
        padding: 0 !important;
        background-color: @headerBackgroundColor;

        .head-wrapper {
            height: 100%;
            line-height: @headerHight;

            .header-siderbar-title-wrapper {
                display: inline-block;
                width: @sideWidth;
                text-align: center;
                vertical-align: center;
                text-decoration: none;
                font-size: 20px;
                color: @headerColor;
                cursor: pointer;
            }

            .header-siderbar-trigger-wrapper {
                display: inline-block;
                position: absolute;
                left:  @sideWidth+20px;
                color: @headerColor;
                font-size: 20px;
                text-decoration: none;
                cursor: pointer;
            }

            .header-avatar-wrapper {
                position: absolute;
                right: 50px;;
                height: 40px;
                cursor: pointer;
                margin: 7px 0px;
                & div {
                    height: 50px;
                }
            }
        }
    }

    .divider-container {
        border-bottom: 1px solid @dividerBorderColor;
        position: relative;
        width: 100%;
    }

    /* aside*/
    /deep/ .el-aside {
        background-color: @sideBackgroundColor;
        border-right: 1px solid @dividerBorderColor;
        overflow: hidden;

        .el-drawer__body {
            height: 100%;
        }

        .sidebar-wrapper {
            height: 100%;

            .el-menu {
                border: none;
                background-color: @sideBackgroundColor !important;

                .el-submenu__title {
                    color: @sideColor !important;
                    background-color: @sideBackgroundColor !important;
                }

                .el-menu-item {
                    color: @sideColor !important;
                    background-color: @sideBackgroundColor !important;
                }

                .is-active {
                    background: @sideActiveBackgroundColor!important;
                    color: @sideActiveColor !important;
                }
            }
        }
    }

    /* main */

    /deep/ .el-main {
        height: 100%;
        padding: 0px;
        overflow: hidden !important;

        .content-wrapper {
            height: 100%;

            .tag-wrapper {
                height: @tagHeight;
                background: @tagBackgroundColor;
                box-shadow: 0px 0 3px 2px rgba(187, 187, 187, 0.1);
                border-bottom: 1px solid @dividerBorderColor;
                padding: 0 6px;

                .el-tabs__header {
                    border: none;
                    margin: 0;
                    .el-tabs__nav {
                        border: none;

                        & > .el-tabs__item:first-child {
                            .el-icon-close {
                                display: none;
                            }
                        }

                        & > .el-tabs__item {
                            height: 30px;
                            line-height: 30px;
                            padding: 0 10px;
                            margin: 4px 3px 4px 3px;
                            color: @tabColor;
                            border: 1px solid #F0F0F0;
                            //color: #515a6e;
                            background: #fff;
                            border-radius: 3px;
                        }

                        & > .is-active {
                            background-color: @tabActiveBackgroundCole !important;;
                            color: @tabActiveColor !important;;
                            //border-color: #42b983;
                            //background: #f0f9eb;
                            //border-color: #c2e7b0;
                        }

                        & > .is-active:before {
                            content: "";
                            background: @tabActiveColor;
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            position: relative;
                            margin-right: 5px;
                        }
                    }
                }
            }

            .contentview-wrapper {
                background: @contentViewBackgroundColor;
                //background: #F8F8F8;
                height: calc(~"100% - @{tagHeight}");

                .view-wrapper {
                    height: 100%;
                    padding: 12px;
                    &>div:not(.el-dialog__wrapper) {
                        background: @contentViewOtherBackgroundColor
                    }
                }
            }
        }
    }
}

/deep/ .hide-sidebar-container {
    width: @hideSideWidth+1 !important; // 算上边框
    .el-submenu__title {
        & > span, .el-submenu__icon-arrow {
            display: none;
        }
    }
}

/deep/ .open-sidebar-container {
    width: @sideWidth !important;

    .el-menu-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/deep/ .hide-drawer-sidebar-container {
    width: 0px !important;
}

/deep/ .el-scrollbar {
    height: 100%;
    .scrollbar-wrap {
        margin-bottom: 0px !important;
        overflow-x: hidden !important;
        .el-scrollbar__view {
            height: inherit;
        }
    }
}

// 页面切换动画
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.3s;
}
.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
}
.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
